<template>
	<view>
		<u-navbar  :title="$t(title)" background="{ background: '#ffffff' }" title-color="#000" back-icon-color="#000"	></u-navbar>
		<view class="wrap">
			<view class="top">
				<view>
					<view class="tit">
						{{sta == 1?'可用余额':sta==3?'芝麻粒总额':'糯米值总额'}}
					</view>
					<view class="num">
						{{num}}
					</view>
				</view>
			</view>

			<view class="billbox">
				<view class="title billbox-title">{{sta == 1?'可余额':sta==3?'芝麻粒':'糯米值'}}明细</view>
			</view>
			
			<view class="billList">
				<view class="list" v-for="(item,idx) in list" :key="idx">
					<view class="tit">{{item.create_time}}</view>
					<view class="bill n-flex-row n-justify-between">
						<view>{{item.remarks}}</view>
						<view class="shu" v-if="item.change_type==1">
							+{{item.number}}
						</view>
						<view class="shu" v-if="item.change_type==2">
							-{{item.number}}
						</view>
					</view>
				</view>
			</view>
			<button class="btn" @click="$.to('/pagesA/pages/my/withdrawal')" v-if="sta == 1">申请提现</button>
		</view>
		<u-empty text="暂无记录" mode="list" :show="show" margin-top="200"></u-empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '',
				page: 1,
				sta: '',
				num: '0',
				list:[],
				show:true,
			}
		},
		// 触底
		onReachBottom() {
			if (this.list.length < this.page * 10) {
				return
			}
			this.page++;
			this.get_money_log(this.sta)
			console.log("触底");
		},
		onLoad(option) {
			this.sta = option.sta
			if (option.sta == 1) {
				this.title = "可用余额"
				this.get_money_log(1)
			}else if(option.sta == 3){
				this.title = "芝麻粒"
				this.get_money_log(3)
			} else {
				this.title = "糯米值"
				this.get_money_log(2)
			}
		},

		methods: {
			get_money_log(type) {
				if (!uni.getStorageSync("user")) {
					return;
				}
				this.$http({
					url: "api/member/money_log",
					data: {
						page: this.page,
						type:type,
					}
				}).then(res => {
					console.log(res, '');
					if (res.data.code == 1) {
						if(res.data.data.list.length == 0){
							this.show = true
						}else{
							this.show = false
						}
						this.list = this.list.concat(res.data.data.list);
						this.num = res.data.data.num
						
					}
				}).catch(err => {});
			},
		}
	}
</script>

<style>
	page {
		background: #f2fafc url("https://v4mh6868.oss-cn-beijing.aliyuncs.com/uploads/20240905/ef044002e484978c199820dd1427182b.jpg") no-repeat top center;
		background-size: 100% auto;
	}

	.wrap {
		padding: 30rpx;
		box-sizing: border-box;
		max-height: calc(100vh - 120rpx);
		overflow: hidden;
		overflow-y: auto;
	}

	.top {
		background-image: linear-gradient(to right, #a7a7f8, #8970f0);
		display: flex;
		align-items: center;
		text-align: center;
		height: 200rpx;
		justify-content: center;
		color: #fff;
		border-radius: 20rpx;
	}

	.num {
		font-weight: bold;
		font-size: 46rpx;
		margin-top: 20rpx;
	}

	.billbox {
		margin-top: 20rpx;
	}
	.billList .list{
		margin-top: 20rpx;
		background-color: #fff;
		border: 1rpx solid #00e1db;
		border-radius: 20rpx;
		color: #000;
		padding: 20rpx;
		box-sizing: border-box;
	}
	.list .tit{
		/* padding-bottom: 20rpx; */
		/* border-bottom: 1rpx solid #efefef; */
	}
	.bill{
		padding: 20rpx 0 10rpx;
	}
	.bill .shu{
		color: #FF0000;
		font-weight: bold;
	}
	.btn {
		width: 710rpx;
		position: absolute;
		left: 20rpx;
		bottom: 40rpx;
		background-color: #2AC2B3;
		color: #fff;
	}
	.billbox-title{
		color: #000;
	}
</style>
